<template>
  <div class="comprehensive-form-container">
    <el-page-header @back="goBack()" />
    <el-form
      ref="formRef"
      v-loading="data.loading"
      class="demo-form"
      :disabled="data.disabled"
      label-width="100px"
      :model="data.form"
    >
      <el-form-item label="应用">
        <el-radio-group v-model="data.form.app">
          <el-radio-button
            v-for="item in data.meta.apps"
            :key="item"
            :label="item"
          />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上级菜单">
        <el-tree-select
          v-model="data.form.parent_id"
          check-strictly
          :data="data.meta.menus"
          :render-after-expand="false"
        />
      </el-form-item>
      <el-form-item label="路由名称" prop="name">
        <el-input
          v-model="data.form.name"
          placeholder="英文名,驼峰命名,唯一性不能重复"
        />
      </el-form-item>
      <el-form-item label="菜单标题" prop="title">
        <el-input
          v-model="data.form.title"
          placeholder="中文名称，菜单上显示的名称"
        />
      </el-form-item>
      <el-form-item label="路径" prop="path">
        <el-input v-model="data.form.path" placeholder="相对路径" />
      </el-form-item>
      <el-form-item label="图标">
        <el-input v-model="data.form.icon" placeholder="图标样式名称" />
      </el-form-item>
      <el-form-item label="重定向" prop="redirect">
        <el-input v-model="data.form.redirect" placeholder="重定向url" />
      </el-form-item>

      <el-form-item label="隐藏" prop="hidden">
        <el-radio-group
          v-model="data.form.hidden"
          placeholder="是否在左侧菜单显示"
        >
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="组件" prop="component">
        <el-input
          v-model="data.form.component"
          placeholder="一级：Layout 二级：空 三级：@/views/xxx/xxx"
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="data.form.sort" placeholder="小的在前" />
      </el-form-item>
      <el-form-item label="api权限">
        <el-input
          v-model="data.form.api"
          placeholder="GET /admin/menu"
          :rows="5"
          type="textarea"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">
          保存
        </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import useForm from '@/hooks/useForm'

  const { formRef, data, resetForm, submitForm, goBack } = useForm({
    res: 'menu',
    meta: true,
  })
</script>
